<template>
  <div class="main-div" >
    <div class="search-div">

      <el-form :inline="true" :model="queryParam" class="demo-form-inline">
        <el-form-item label="角色编码:">
          <el-input class="text-input"
                    placeholder="请输入角色编码"
                    prefix-icon="el-icon-search"
                    v-model="queryParam.roleCode">
          </el-input>
        </el-form-item>
        <el-form-item label="角色名称:">
          <el-input class="text-input"
                    placeholder="请输入角色名称"
                    prefix-icon="el-icon-search"
                    v-model="queryParam.roleName">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addNewDialog">新增</el-button>
        </el-form-item>

      </el-form>
    </div>

    <div>
      <div class="main-table" >
        <el-table
          ref="multipleTable"
          :data="pageInfo.records"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-dblclick="onShow">
          <el-table-column
            prop="roleCode"
            label="角色编码"
            width="100">
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="角色名称" >
          </el-table-column>
          <el-table-column
            prop="roleDesc"
            label="角色描述"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="修改时间"
            width="180">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleEditClick(scope.row)" type="primary" size="mini">编辑</el-button>
              <el-button @click="handleDeleteClick(scope.row)" type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <!--分页-->
        <el-pagination
          class="margin-top"
          small
          background
          layout="prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.size"
          :current-page="pageInfo.current"
          @current-change="handlePageChange"
          @next-click="handlePageChange"
          @prev-click="handlePageChange">
        </el-pagination>
      </div>
    </div>

    <div>
      <el-dialog
        :title="saveFlag==='edit'?'修改角色':'新增角色'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="500">
        <el-form label-position="left" label-width="80px" :model="saveObject" size="small">
          <el-form-item label="角色编码">
            <el-input v-model="saveObject.roleCode"></el-input>
          </el-form-item>
          <el-form-item label="角色名称">
            <el-input v-model="saveObject.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="saveObject.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import {listRole,addRole,updateRole,deleteRole} from '../../api/manager/role'
import {deleteEmptyProp} from '../../utils/utils'

export default {
  name: 'role',
  data() {
    return {
      viewDialogVisible: false,
      dialogVisible: false,
      saveFlag:"add",
      pageInfo:{
        size:10,
        current:1,
        total:0
      },
      queryParam:{
        criClass:"",
        keyWord:""
      },
      //已被多选的值
      multipleSelection: [],
      //显示dialog绑定值
      showObject:{},
      saveObject:{
      }
    }
  },
  created() {
    this.loadData();
  },
  computed: {
    ...mapGetters([
      'wsMsg'
    ])
  },
  watch: {
    //监测 wsMsg
    wsMsg: function (msg) {

    }
  },
  methods:{
    //初始查询
    loadData() {

      let queryPage = {
        pageInfo:{
          pageSize:this.pageInfo.size,
          current:this.pageInfo.current,
        },
        queryParam:deleteEmptyProp(this.queryParam)
      }
      //初始查询数据
      listRole(queryPage).then(res => {
        this.pageInfo = res;
      })
    },
    onSubmit() {
      this.loadData();
    },
    openCreateDialog(){
      this.dialogVisible = true;
    },
    onCreate() {

    },
    onShow(row){
      this.showObject = row;
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    //操作选中方法
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        //为空则清空
        this.$refs.multipleTable.clearSelection();
      }
    },
    handlePageChange(current) {
      this.pageInfo.current = current;
      this.loadData();
    },addNewDialog(){
      this.saveFlag = "add";
      this.dialogVisible = true
      this.saveObject = {};
    },handleEditClick(row){
      this.saveFlag = "edit";
      this.dialogVisible = true
      this.saveObject = row;
    },handleDeleteClick(row){
      this.$confirm("确认删除此条角色数据?", '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //确定之后删除
        deleteRole(row).then(result => {
          this.$message.success("删除成功！")
          this.loadData();
        });
      }).catch(() => {
        console.log("取消删除..");
      });
    },save(){
      this.dialogVisible = false
      if(this.saveFlag == "edit"){
        updateRole(this.saveObject).then(result => {
          this.$message.success("更新成功！")
          this.loadData();
        })
      }else{
        addRole(this.saveObject).then(result => {
          this.$message.success("新增成功！")
          this.loadData();
        })
      }
    }
  }
}
</script>

<style>
  .dashboard-container .el-dialog__header {
    border-bottom: 1px solid #dedede;
  }

  .dashboard-container .el-dialog__title {
    font-size: 16px;
    color: #333;
  }
</style>
<style scoped lang="scss">

  .main-div {
    padding: 20px 0 0 30px;

    .main-table {
      width: 100%;
      position: relative;
      height: 1200px;
      display: inline-block;
      vertical-align: top;
      border-radius: 5px;

      .hide-point-div {
        border-radius: 5px;
        width: 16px;
        height: 16px;
        z-index: 999;
        position: absolute;
      }

      .main-table-div {
        border-radius: 15px;
        border: 3px solid #3a5063;
        margin: 16px;
        padding: 16px;
        display: flex;
        position: relative;
        z-index: 1000;
        left: 100px;

        .link-left-node-div {
          width: 16px;
          height: 16px;
          background-color: #123456;
          position: absolute;
          right: 0px;
          top: 57px;
          z-index: 1000;
        }
      }

      .assist-table-div {
        border-radius: 15px;
        display: flex;
      }

      .float-table-div {
        margin-right: 10px;
        font-size: 12px;
        height: 100%;

        .btn-pos {
          border: 1px solid #99a9bf;
          background-color: #409EFF;
          color: #034460;
        }

      }

      .float-link-div {
        width: 10px;
        height: 100%;
        z-index: 1000;

        .link-right-node-div {
          top: 50%;
          margin-left: -16px;
          margin-top: 45px;
          height: 16px;
          width: 16px;
          background: #123456;
          z-index: 1000;
        }
      }
    }
  }

  .main-master {
    width: 50%;
    float: left;
    margin: 20px;
  }

  .main-all-master {
    float: left;
  }

  .main-dependent {
    float: left;
    border: 1px;
    box-sizing: border-box;
  }

  .main-all-dependent {
    float: left;
  }

  .text-input {
    width: 180px;
  }

  .tableInfo-div {
    height: 480px;
    overflow: auto;
  }

  .search-div {
  }

</style>
